import React from 'react';
import ReactDom from 'react-dom';
import {Button,Menu,Modal,Icon,Tabs,message,Form,Input,CheckBox} from 'antd';
import 'antd/dist/antd.css';
const FormItem = Form.Item;
const SubMenu = Menu.SubMenu;
const TabPane = Tabs.TabPane;
const MenuItemGroup = Menu.MenuItemGroup;
import { Row,Col } from 'antd';
import {Router, Route, Link, browserHistory} from 'react-router';


class PCHeader extends React.Component{
	constructor(){
		super();
		this.state={
			current:'index',
			modalVisible:false,
			action:'login',
			hasLogined:false,
			userNickName:'',
			userid:0
		}
	};
	setModalVisible(value){
		this.setState({modalVisible:value});
	};
	handleClick(e){
		if(e.key=='register'){
			this.setState({current:'register'});
			this.setModalVisible(true);
		}else{
			{
				this.setState({current:e.key});
			}
		}
	};
	handleSubmit(e){
		//页面开始向api提交数据
		e.preventDefault();
		var myFetchOptions ={
			method:'GET'
		};
		var formData = this.props.form.getFieldsValue();//this.props.form.getFieldValue('username');获取单个
		fetch("http://newsapi.gugujiankong.com/Handler.ashx?action=" + this.state.action
		+ "&username="+formData.userName+"&password="+formData.password
		+"&r_userName=" + formData.r_userName + "&r_password="
		+ formData.r_password + "&r_confirmPassword="
		+ formData.r_confirmPassword, myFetchOptions)
		.then(response => response.json())
		.then(json => {
			this.setState({userNickName: json.NickUserName, userid: json.UserId});
		});
		if(this.state.action=="login"){
			this.setState({hasLogined:true});
		}
		message.success("请求成功！");
		this.setModalVisible(false);
	};
	callback(key){
		if(key===1){
			this.setState({action:'login'});
		}else if(key===2){
			this.setState({action:'register'});
		}
	}
	render(){
		let {getFieldProps} = this.props.form;
		const userShow=this.state.hasLogined
		?<Menu.Item key="logout" class="register">
		<Button type="primary">{this.state.userNickName}</Button>
		&nbsp;<Link target="_blank"><Button type="dashed" htmlType="button">个人中心</Button></Link>
		&nbsp;<Button type="ghost" htmlType="button">退出</Button></Menu.Item>
		:<Menu.Item key="register" class="register"><Icon type="plus-square-o"/>注册/登录</Menu.Item>;
		return (
			<header>
			    <Row>
			        <Col span={2}></Col>
			        <Col span={2}>
						<a href="/" class="logo">
							<img src="./images/logo2.png" alt="logo" />
						</a>
			        </Col>
			        <Col span={18}>
						<Menu mode="horizontal" onClick={this.handleClick.bind(this)} selectedKeys={[this.state.current]}>
							<Menu.Item key="index"><Link to={`/`}><Icon type="appstore"/>首页</Link></Menu.Item>
							<Menu.Item key="tec"><Link to={`list/tec`}><Icon type="tool"/>技术</Link></Menu.Item>
							<Menu.Item key="work"><Link to={`list/works`}><Icon type="bars"/>作品</Link></Menu.Item>
							<Menu.Item key="essay"><Link to={`list/essay`}><Icon type="edit"/>随笔</Link></Menu.Item>
							<Menu.Item key="other"><Link to={`list/other`}><Icon type="share-alt"/>其他</Link></Menu.Item>
							{userShow}
						</Menu>

				    <Modal title="用户中心" wrapClassName="vertical-modal" visible={this.state.modalVisible} onCancel={()=>this.setModalVisible(false)} onOk={()=>this.setModalVisible(false)} okText="关闭">
			            <Tabs type="card" onChange={this.callback.bind(this)}>
							<TabPane tab="注册" key="2">
								<Form horizontal onSubmit={this.handleSubmit.bind(this)}>
									<FormItem label="账户">
 										<Input placeholder="请输入账号" {...getFieldProps('r_userName')} />
									</FormItem>
									<FormItem label="密码">
 										<Input type="password" placeholder="请输入密码" {...getFieldProps('r_password')} />
									</FormItem>
									<FormItem label="确认密码">
 										<Input type="password" placeholder="请再次输入密码" {...getFieldProps('r_confirmPassword')} />
									</FormItem>
									<Button type="primary" htmlType="submit">注册</Button>
								</Form>
							</TabPane>

							<TabPane tab="登录" key="1">
								<Form horizontal onSubmit={this.handleSubmit.bind(this)}>
									<FormItem label="账户">
 										<Input placeholder="请输入账号" {...getFieldProps('userName')} />
									</FormItem>
									<FormItem label="密码">
 										<Input type="password" placeholder="请输入密码" {...getFieldProps('password')} />
									</FormItem>
									<Button type="primary" htmlType="submit">登录</Button>
								</Form>
							</TabPane>
			            </Tabs>
			        </Modal>
			        </Col>
			        <Col span={2}></Col>
			    </Row>
			</header>
		);
	};
}

export default PCHeader = Form.create({})(PCHeader);